<?php $this->headLink()->appendStylesheet($this->baseUrl() . '/css/offer.css') ?>
<?php $this->headLink()->appendStylesheet($this->baseUrl() . '/libs/fileupload/css/jquery.fileupload-ui.css') ?>
<?php $this->headScript()->appendFile($this->baseUrl() . '/libs/fileupload/js/jquery.iframe-transport.js') ?>
<?php $this->headScript()->appendFile($this->baseUrl() . '/libs/fileupload/js/jquery.fileupload.js') ?>
<?php
$daoOffer = new Application_Model_DAO_Offer();
$photoExceededMessage = $daoOffer->validatePhotos($this->bean);
$isNewPhotoAllowed = $photoExceededMessage === true;
?>
<?= $this->render('offer/add-breadcrumbs.phtml') ?>
<h4><?= $this->translate('XXX_OFFER_ADD_STEP_PHOTO_TITLE') ?></h4>
<script type="text/javascript">
    $(function() {
        $('.upload_form_visible_0').hide();
        
        $('#file_upload').fileupload({
            url: '<?= $this->url(array('controller' => 'offer', 'action' => 'upload-photo', 'token' => $this->token, 'x-force-ajax' => 1), 'default', true) ?>',
            dataType: 'json',
            done: function (e, data) {
                if(isIE) {
                    document.location.reload();
                    return;
                }
                setTimeout("$('#upload_progress').fadeOut(function() {$('#upload_info').fadeIn();});", 3000);
                try {
//                    var p = jQuery.parseJSON(data.result);
                    var p = data.result;
                    if(p.photoAmoutExceeded && p.photoAmoutExceeded == '1') {
                        setTimeout("$('.upload_form').slideUp();", 1000);
                    }
                    if(p.status == 'OK') {
                        var html = p.html;
                        $(html).css('opacity', '0').appendTo('.offer_add .thumbnails')
                        .animate({
                            opacity: 1
                        }, 'slow');
                    } else {
                        alert('Błąd: ' + p.error[0]);
                    }
                } catch(ex) {
                    alert('UploadError');
                    console.log(ex);
                    console.log(data);
                }
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#upload_progress .bar').css('width', progress + '%');
            },
            start: function(e) {
                $('#upload_info').fadeOut(function() {
                    $('#upload_progress .bar').css('width', '0%');
                    $('#upload_progress').fadeIn();
                });
            }
        });
        $('.offer_add').on('click', '.removePhotoBtn', function(event) {
            event.preventDefault();
            var url = $(this).attr('href');
            var pid = $(this).attr('data-pid');
            $.get(url, null, function(data) {
                if(data.status == 'OK') {
                    $('#photo_' + pid).animate({
                        width: 0,
                        opacity: 0
                    }, function() {
                        $('#photo_' + pid).remove();
                    });
                    if(data.photoAmoutExceeded == 0) {
                        $('.upload_form').slideDown();
                    } else {
                        $('.upload_form').slideUp();
                    }
                }
            });
        });
    });
</script> 
<div class="offer_add">
    <div class="row-fluid photo-thumbs">
        <ul class="thumbnails">
            <?php
            foreach ($this->bean->photos as $p) {
                $this->p = $p;
                echo $this->render('offer/add-step-photo-thumb.phtml');
            }
            ?>
        </ul>
    </div>
    <div class="upload_form upload_form_visible_<?= (int) $isNewPhotoAllowed ?> row-fluid">
        <span class="btn btn-primary span3" id="sendPhotoBtn" type="button">
            <span><?= $this->translate('XXX_OFFER_UPLOAD_PHOTO_BTN') ?></span>
            <input type="file" name="file_upload" id="file_upload" />
        </span>
        <div class="progress span9 display-none" id="upload_progress">
            <div class="bar" style="width: 0%;"></div>
        </div>
        <div class="span9" id="upload_info"><?= $this->translate('XXX_OFFER_ADD_UPLOAD_PHOTO_BTN_INFO_TEXT') ?></div>
    </div>
    <div class="wizard-action">
        <a class="step-prev" href="<?= $this->url(array('controller' => 'offer', 'action' => 'step-prev', 'token' => $this->token), 'default', true) ?>">Wstecz</a>
        <a class="btn btn-primary btn-large" href="<?= $this->url(array('controller' => 'offer', 'action' => 'add', 'token' => $this->token, 'step' => 'next'), 'default', true) ?>">Dalej</a>
    </div>
</div>